<template>
    <h3>添加文章</h3>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
        <Editor style="height: 500px; overflow-y: hidden;" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="handleCreated" />
    </div>


    <el-button @click="submitTestPaperFn" type="primary" size="large" plain>提交</el-button>
    <el-button @click="PaperFn" type="success" size="large" plain>重置</el-button>
    <div class="category-table">
        <!-- :data="tableData" -->
        <el-table stripe style="width: 100%">
            <el-table-column prop="index" label="序号" width="200" />
            <el-table-column prop="name" label="文章名称" width="180" />
            <el-table-column>
                <template #default="scope">

                    <el-button @click="handleDelete(scope.$index, scope.row)" size="small" type="danger">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">

import { article_add, examList, examRemove } from '../../api/request'
import { ElMessage, ElMessageBox } from 'element-plus';
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, reactive, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
// import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
    components: { Editor, Toolbar },
    setup() {
        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef()

        // 内容 HTML
        const valueHtml = ref()

        // 模拟 ajax 异步获取内容
        // onMounted(() => {
        //     setTimeout(() => {
        //         valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
        //     }, 1500)
        // })

        const toolbarConfig = {}
        const editorConfig = { placeholder: '请输入内容...' }

        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            if (editor == null) return
            editor.destroy()
        })

        const handleCreated = (editor: any) => {
            editorRef.value = editor // 记录 editor 实例，重要！
        }



        // 表格数据
        const tableData = ref<any>([])

        // 点击提交
        const submitTestPaperFn = async () => {
            // 获取表单信息
            const ArticleTime = valueHtml.value;
            console.log(ArticleTime);

            // 判断是否有值
            if (ArticleTime) {
                // console.log('111111');
                console.log('ArticleTime==>', ArticleTime)
                await article_add({ ArticleTime })
                    .then(
                        content => {
                            console.log(content)
                            const { code, msg } = content;
                            if (code == 200) {

                                ElMessage.success(msg)
                            }
                            else {
                                ElMessage.error(msg)
                            }
                        },
                        err => {
                            console.log(err)
                        }
                    )
            }
            else {
                console.log('2222');
                ElMessage.error("你好")


            }
        }

        const PaperFn = async () => {
            const ArticleTime = ''
        }

        // 获取试卷列表
        const examListFn = async () => {
            await examList()
                .then(
                    content => {
                        // console.log('111',content);
                        const { code, msg, result } = content;
                        if (code == 200) {
                            const arr = result.map((item: any, i: number) => {
                                item.index = i + 1;
                                return item
                            })
                            tableData.value = arr;
                        }
                        else {
                            ElMessage.error(msg)
                        }
                    }
                )
        }

        // 点击删除
        const handleDelete = (index: number, row: any) => {
            // console.log(index, row)
            // console.log(index, row)
            // 获取当前点击的选项
            const { id, name } = row;
            ElMessageBox.confirm(
                `是否删除这个“${name}”文章?`,
                '提示',
                {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }
            )
                .then(async () => {
                    // console.log("点击确定")
                    // 删除考试分类
                    await examRemove({ id })
                        .then(
                            content => {
                                const { code, msg } = content;
                                if (code != 200) {
                                    ElMessage.error(msg)
                                }
                            }
                        )
                    // 删除程序中数组对应的数据
                    tableData.value.splice(index, 1);
                })
                .catch(() => {
                    // console.log("点击取消")
                })
        }

        // 初始化数据

        examListFn();



        return {
            editorRef,
            valueHtml,
            mode: 'default', // 或 'simple'
            toolbarConfig,
            editorConfig,
            handleCreated,
            submitTestPaperFn,
            handleDelete,
            PaperFn
        };




    }




}







</script>